<template>
  <main-card title="镜像管理" :tabs="getTabs()" :online-lab="true" :show-screen-space="false">
    <div class="fbc mb-32">
      <a-input
        v-model:value="pageForm.imageName"
        v-trim
        class="h-36"
        allow-clear
        placeholder="请输入名称"
        style="width: 268px"
        @keyup.enter="getDataList({ offset: 1 })"
      >
        <template #prefix> <i class="iconfont icon-search-line"></i> </template>
      </a-input>
    </div>
    <a-table
      :style="{ width: '100%' }"
      :columns="tableColumns"
      :data-source="dataList"
      :pagination="false"
      :loading="loading"
      @change="onTableChange"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex == 'createTime'">
          <div>
            {{ dateFormat(record.createTime) }}
          </div>
        </template>

        <template v-else> {{ replaceEmptyStr(record[column.dataIndex as string]) }} </template></template
      >
    </a-table>
    <g-pagination v-model:offset="pageForm.offset" v-model:limit="pageForm.limit" :total="pageForm.total" @change="getDataList" />
  </main-card>
</template>

<script lang="ts" setup>
  import { dateFormat } from 'g6-fn'
  import { ref } from 'vue'

  import HeaderSearch, { HeaderSearchEvents } from '@/components/HeaderSearch/index.vue'
  import useList from '@/hooks/use-list'
  import { mirrorManageApi } from '@/services/api'
  import { filterTableColumns, replaceEmptyStr } from '@/utils'

  import { ImageType } from '../../types/index'
  import { getTabs } from '../../utils'

  interface PageForm {
    imageName: string
    columns: 'updateTime' | 'createTime'
    order: 'desc' | 'asc'
  }
  // 表格
  const tableColumns = ref(
    filterTableColumns([
      {
        title: '名称',
        dataIndex: 'imageName',
        width: 200
      },
      {
        title: '框架 ',
        dataIndex: 'frame',
        width: 180
      },
      {
        title: '描述',
        dataIndex: 'description'
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        isSort: true,
        width: 190
      }
    ])
  )

  const { pageForm, dataList, getDataList, loading } = useList<PageForm, ImageType>(mirrorManageApi.getDefaultMirrorList, {
    imageName: '',
    columns: 'createTime',
    order: 'desc'
  })

  const onTableChange = (pagination: any, filters: any, sorter: any) => {
    if (!sorter.order) {
      getDataList({ order: 'desc', columns: 'createTime' })
      return
    }
    const order = sorter.order === 'ascend' ? 'asc' : 'desc'
    getDataList({ offset: 1, order, columns: sorter.field })
  }

  getDataList()
</script>

<style lang="less" scoped></style>
